<template>
    <div>
        <!--顶部筛选区域-->
        <el-row :gutter="20">
            <el-col :span="24">
                <el-input v-model="form.name" clearable placeholder="请输入名称" style="max-width: 220px;" @clear="_getUserList(1)"></el-input>
                <el-select v-model="form.cate" clearable placeholder="请选择用户">
                    <el-option
                            v-for="item in cateList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-button style="margin-left: 20px;" @click="_getUserList(1)">搜索</el-button>
                <el-button type="primary" style="float: right">导出</el-button>
            </el-col>
        </el-row>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="用户信息"  width="380">
                <template slot-scope="scope">
                    <div class="info">
                        <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                        <div class="info-right">
                            <p>
                                <span v-if="scope.row.company_id !== 0" style="display: inline-block; background-color: #409EFF;color: #fff; border-radius: 4px;padding: 0 2px">员工</span>
                                <span>{{ scope.row.nickname }}</span>
                            </p>
                            <p style="color: #409EFF">
                                <span v-if="scope.row.realname">{{ scope.row.realname }}  |</span>
                                <span v-if="scope.row.englishname">{{ scope.row.englishname }}  |</span>
                                <span>{{ scope.row.company_name }}</span>
                            </p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="是否实名">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 2" style="color: #67C23A">已实名</span>
                    <span v-else style="color: #F56C6C">未实名</span>
                </template>
            </el-table-column>
            <el-table-column label="操作绑定">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" v-if="scope.row.status !== 2" @click="bindCompany(scope.row)" :disabled="scope.row.status !== 2">绑定企业</el-button>
                    <el-button plain size="mini" v-if="scope.row.status === 2 && scope.row.company_id !== 0" @click="cancelBindCompany(scope.row)">解除绑定</el-button>
                    <el-button type="primary" size="mini" v-if="scope.row.status === 2 && scope.row.company_id === 0" @click="bindCompany(scope.row)">绑定企业</el-button>
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 0">未激活</span>
                    <span v-else-if="scope.row.status === 1">未认证</span>
                    <span v-else-if="scope.row.status === 2">审核通过</span>
                    <span v-else-if="scope.row.status === 3">已提交待审核</span>
                    <span v-else-if="scope.row.status === 4">审核不通过</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="signRecord(scope.$index, scope.row)">签署记录</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total - 0"></Pagination>

        <!--绑定企业的dialog-->
        <el-dialog
                :visible.sync="bindCompanyDialog"
                width="50%"
                @close="dialogBindCompanyClose">
            <!--这里的插槽会替换title显示的内容-->
                    <div slot="title" class="header-title">
                        <p class="title-name">绑定企业</p>
                        <!--<p class="title-info">info</p>-->
                    </div>
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择企业" prop="company_id">
                    <el-select v-model="addForm.company_id" placeholder="请选择企业" style="width: 32%;max-width: 32%;">
                        <el-option :label="item.name" :value="item.id" v-for="item in companyS" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bindCompanyDialog = false">取 消</el-button>
                <el-button type="primary" @click="dialogBindSure">确 定</el-button>
            </span>
        </el-dialog>

        <!--解除绑定企业的dialog-->
        <el-dialog
                :visible.sync="bindCompanyDialogEdit"
                width="50%"
                @close="dialogBindCompanyCloseEdit">
            <!--这里的插槽会替换title显示的内容-->
                    <div slot="title" class="header-title">
                        <p class="title-name">绑定企业</p>
            <!--<p class="title-info">info</p>-->
                    </div>
            <el-form :model="editForm" :rules="addRules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择企业" prop="company_id">
                    <el-select v-model="editForm.company_id" placeholder="请选择企业" style="width: 32%;max-width: 32%;">
                        <el-option :label="item.name" :value="item.id" v-for="item in companyS" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="bindCompanyDialogEdit = false">取 消</el-button>
                <el-button type="primary" @click="dialogBindSureEdit">解 绑</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '../../components/pagination'
    import { getUserList, bindCompanyPersonal } from '../../api/userAPI'
    import { companyList } from '../../api/companyApi'
    export default {
        name: "user",
        data() {
            return{
                form: {
                    name: '',
                    cate: ''
                },
                // 绑定企业的表单
                addForm: {
                    mid: '', // 会员id
                    company_id: '', // 企业id
                    operate: 1 // 授权方式（1-授权 0-取消授权）
                },
                // 编辑企业的表单
                editForm: {},
                loading: true,
                cateList: [
                    {
                        id: 1,
                        name: '全部用户'
                    },
                    {
                        id: 2,
                        name: '普通用户'
                    },
                    {
                        id: 3,
                        name: '员工'
                    }
                ],
                page: 1, // 当前页数
                addRules: {
                    company_id: [
                        { required: true, message: '请选择企业', trigger: 'change' },
                    ]
                },
                companyS: [],
                tableData: [],
                total: '',
                bindCompanyDialog: false,
                bindCompanyDialogEdit: false,
                dialogEdit: false,
            }
        },
        created() {
            this._getUserList(this.page) // 获取用户列表
        },
        methods: {
            handleChangeArea(value) {
                console.log(value)
            },
            // 获取用户列表
            async _getUserList(page) {
                let params = {p: page, length: 10, nickname: this.form.name}
                const { data } = await getUserList(params)
                console.log(data)
                this.tableData = data.list
                this.total = data.total
                this.loading = false
            },
            // 签署记录
            async signRecord(index, row) {
                console.log(index, row)
                this.$router.push({path: '/sign-management', query: {mid: row.mid}})
            },
            // 分页的 当前点击的页数
            currentPage(data) {
                console.log(`当前页: ${data}`)
                this.page = data
                this.loading = true
                this._getUserList(this.page)
            },
            // 绑定企业的确定事件
            dialogBindSure() {
                this.$refs.addForm.validate(async valid => {
                    console.log(valid)
                    if (!valid) return false
                    // 这里发送 确定的请求
                    console.log(this.addForm)
                    const res = await bindCompanyPersonal(this.addForm)
                    if (res.code === 0) {
                        console.log(res)
                        this._getUserList(this.page) // 获取用户列表
                        this.$message.success('绑定成功')
                        this.bindCompanyDialog = false
                    }
                })
            },
            // 绑定企业
            async bindCompany(row) {
                this.addForm.mid = row.mid
                // let params = {p: 1, length: 10}
                const res = await companyList()
                if (res.code === 0) {
                    console.log(res)
                    this.companyS = res.data.list
                    this.bindCompanyDialog = true
                }
            },
            // 解绑企业
            async cancelBindCompany(row) {
                // this.editForm = row
                console.log(row)
                // const res = await companyList()
                // if (res.code === 0) {
                //     console.log(res)
                //     this.companyS = res.data.list
                //     this.bindCompanyDialogEdit = true
                // }
                this.$confirm('是否解除该用户的企业员工身份?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let params = {
                        mid: row.mid, // 会员id
                        company_id: row.company_id, // 企业id
                        operate: 0 // 授权方式（1-授权 0-取消授权）
                    }
                    console.log(params)
                    const res = await bindCompanyPersonal(params)
                    if (res.code === 0) {
                        console.log(res)
                        this._getUserList(this.page) // 获取用户列表
                        this.$message.success('解绑成功')
                    }
                }).catch(() => {
                    this.$message.info('已取消')
                })
            },
            // 解绑企业的确定事件
            dialogBindSureEdit() {
                this.$refs.editForm.validate(async valid => {
                    console.log(valid)
                    if (!valid) return false
                    // this.$message.success('解绑成功')
                    // this.bindCompanyDialogEdit = false
                    // 这里发送 确定的请求
                    console.log(this.editForm)
                    let params = {
                        mid: this.editForm.mid, // 会员id
                        company_id: this.editForm.company_id, // 企业id
                        operate: 0 // 授权方式（1-授权 0-取消授权）
                    }
                    console.log(params)
                    const res = await bindCompanyPersonal(params)
                    if (res.code === 0) {
                        console.log(res)
                        this._getUserList(this.page) // 获取用户列表
                        this.$message.success('解绑成功')
                        this.bindCompanyDialogEdit = false
                    }
                })

            },
            // 绑定企业的dialog关闭事件
            dialogBindCompanyClose() {
                this.$refs.addForm.resetFields()
            },
            // 修改企业的dialog关闭事件
            dialogBindCompanyCloseEdit() {
                this.$refs.editForm.resetFields()
            }
        },
        components: {
            Pagination
        }
    }
</script>

<style scoped lang="scss">
    .header-title {
        .title-name {
            font-size: 18px;
            color: #333;
            font-weight: 600;
            margin-bottom: 0;
        }
        .title-info {
            font-size: 11px;
            color: #7d7d7d;
            margin-bottom: 0;
            margin-top: 4px;
        }
    }
    .info {
        display: flex;
        align-items: center;
        .info-right {
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            font-size: 14px;
            p {
                margin: 0;
            }
        }
    }
</style>
